<template>
  <div id="inDispatch" style="padding-bottom: 1.2rem;">
    <load-more tip="加载数据中..." v-if="!loading"></load-more>
    <div v-if="loading" :style="{marginBottom}">
      <div class="waiting" v-if="verify == 1">
        <img src="../../static/img/waiting.png" style="width: 1.35rem; height: 0.9rem; display: block; margin: 0 auto;" />
        <p style="line-height: 0.8rem; font-size: 0.3rem;">报价成功</p>
        <p class="text-gray">已通知货主,等待货主选择</p>
      </div>
      <div style="margin-top: 0.1rem;">
        <div class="penson">
          <div class="headimg"><img :src="userinfo.face" /></div>
          <div class="flex-auto">
            <p class="flex flex-middle">
              <span class="overflowtext" style="font-size: 0.32rem;">{{userinfo.realname}}</span>
              <i class="icon icon-qiye" v-if="userinfo.verify_company == 1"></i>
              <i class="icon icon-gerenrenzheng" v-if="userinfo.verify_card == 1"></i>
            </p>
            <div class="flex flex-middle">
              <rater disabled v-model="userinfo.comment_score" active-color="#ff9800"></rater>
              <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">
                {{ userinfo.credits }}<span style="font-size: 0.24rem;">分</span>
                &nbsp;&nbsp;{{ userinfo.order_pai_count || 0}}单
              </span>
            </div>
          </div>
          <div class="other text-orange text-right" v-if="userinfo.phone">
            <a :href="'tel:' + userinfo.phone" class="text-orange"><i class="icon icon-phone"></i></a>
          </div>
        </div>
      </div>
      <div style="margin-top: 0.1rem;" v-if="driverinfo.driver_phone">
        <div class="penson">
          <div class="headimg"><img :src="driverinfo.face" /></div>
          <div class="flex-auto">
            <p class="flex flex-middle">
              <span class="overflowtext" style="font-size: 0.32rem;">{{driverinfo.driver_name}}</span>
              <i class="icon icon-xiaoche"></i>
            </p>
            <div class="flex flex-middle">
              <span>{{driverinfo.driver_car_name}}</span>
              <span style="margin-left: 0.1rem">{{driverinfo.driver_car_num}}</span>
              <span style="margin-left: 0.1rem">{{driverinfo.driver_car_length || ''}}</span>
            </div>
          </div>
          <div class="other text-orange text-right" v-if="driverinfo.driver_phone">
            <a :href="'tel:' + driverinfo.driver_phone" class="text-orange"><i class="icon icon-phone"></i></a>
          </div>
        </div>
      </div>
      <div class="items">
        <div class="address vux-1px-b">
          <div class="addresslist flex flex-middle">
            <div>
              <i class="icon icon-quan1 text-orange"></i>
            </div>
            <div class="flex-auto">
              <p class="overflowtext">{{dataObj.p_addr}}{{dataObj.p_addr_more}}</p>
              <p class="vux-1px-t">{{dataObj.p_phone}}</p>
            </div>
          </div>
          <a v-if="dataObj.p_phone.indexOf('*') == -1" :href="'tel:' + dataObj.p_phone" class="text-orange listphone"><i class="icon icon-phone"></i></a>
        </div>
      </div>
      <div class="items" v-for="item in dataObj.get_addr">
        <div class="address vux-1px-b">
          <div class="addresslist flex flex-middle">
            <div>
              <i class="icon icon-quan1 green"></i>
            </div>
            <div class="flex-auto" v-if="item.get_addr.indexOf('http') == -1">
              <p class="overflowtext">{{item.get_addr}}{{item.get_addr_more}}</p>
              <p class="vux-1px-t" v-if="item.get_phone">{{item.get_phone}}</p>
            </div>
            <div @click="addressPic = item.get_addr" class="flex-auto" v-if="item.get_addr.indexOf('http') > -1">
              <p class="overflowtext">点击查看拍照地址</p>
            </div>
          </div>
          <div v-if="item.get_phone">
            <a :href="'tel:' + item.get_phone" v-if="item.get_phone.indexOf('*') == -1" class="text-orange listphone"><i class="icon icon-phone"></i></a>
          </div>
        </div>
      </div>

      <group style="margin-top: 0.15rem;">
        <cell title="运单单号" :value="dataObj.num"></cell>
        <cell title="下单时间" :value="dataObj.order_time"></cell>
        <cell :title="onlinetitle">
          <b class="text-orange">{{ dataObj.pick_up_time }}</b>
        </cell>
        <cell title="任务完成时间" v-if="dataObj.end_time">
          <b class="text-orange">{{ dataObj.end_time }}</b>
        </cell>
        <cell title="服务类型" v-if="dataObj.service" :value="dataObj.service"></cell>
        <cell title="货物详情" class="fourzi" v-if="dataObj.goods_info">
          <div slot="value" class="overflowtext">
            <span style="color: #149ede;" @click="show = true" v-if="dataObj.goods_img1 || dataObj.goods_img2"><i class="icon icon-image" style="font-size: 0.32rem;"></i>查看图片</span>
            <span>{{dataObj.goods_info}}</span>
          </div>
        </cell>
        <cell title="货物备注" class="fourzi" v-if="dataObj.goods_desc">
          <div slot="value" class="overflowtext">
            <span>{{dataObj.goods_desc || ''}}</span>
          </div>
        </cell>
        <cell title="货物参数">
          <div slot="value" class="overflowtext">
            <span v-if="dataObj.weight > 0">重量:{{dataObj.weight}}{{dataObj.unit || '吨'}}</span>
            <span v-if="dataObj.volume > 0">体积:{{dataObj.volume}}方</span>
            <span v-if="dataObj.number > 0">数量:{{dataObj.number}}件</span>
          </div>
        </cell>
        <cell title="包装方式" class="fourzi" v-if="dataObj.package">
          <div slot="value" class="overflowtext">
          <span>
            {{dataObj.package}}
          </span>
          </div>
        </cell>
        <cell title="个性要求" class="fourzi" v-if="dataObj.personality_need">
          <div slot="value" class="overflowtext">
          <span>
            {{dataObj.personality_need}}
          </span>
          </div>
        </cell>
        <cell title="车辆需求" class="fourzi" v-if="dataObj.car_id">
          <div slot="value" class="overflowtext">
          <span>
            {{dataObj.car_id}} {{dataObj.car_length}} {{dataObj.has_certificate}}
          </span>
          </div>
        </cell>
        <cell title="额外需求" class="fourzi">
          <div slot="value" class="overflowtext">
          <span>
            {{dataObj.extra_need}}
          </span>
          </div>
        </cell>
        <cell title="备注" class="fourzi" v-if="dataObj.remark">
          <div slot="value" class="overflowtext">
          <span>
            {{dataObj.remark || ''}}
          </span>
          </div>
        </cell>

        <cell v-if="dataObj.baoe > 0" title="货物保险" :value="'货值 '+(dataObj.baofei || 0)+'元 保费 '+(dataObj.baoe || 0)+'元'"></cell>
      </group>

      <group style="margin-top: 0.15rem;">
        <cell title="支付方式" :value="dataObj.pay_type"></cell>
        <cell title="已付保费" v-if="dataObj.baofei > 0">
          <div slot="value">
            <b style="color: #ff5722;">
              {{dataObj.baofei || 0}}元
            </b>
          </div>
        </cell>
        <cell title="参考里程" :value="dataObj.mileage + 'km'"></cell>

      </group>

      <div class="footer-action">
        <group>
          <cell :title="bjtitle" v-if="verify != 0 && dataObj.freight > 0">
            <b class="text-orange">{{ dataObj.freight }}元</b>
          </cell>
          <cell title="调度费" v-if="verify != 0 && dataObj.scheduling_fee > 0">
            <b class="text-orange">{{ dataObj.scheduling_fee }}元</b>
          </cell>
        </group>
        <div style="padding: 0.1rem 0.2rem;" v-if="verify  === 0">
          <x-button type="primary"  action-type="button" @click.native="handleOffer">{{ btnName }}</x-button>
        </div>
      </div>
    </div>
    <div class="xdialog flex flex-middle" @click="show = false" v-if="show">
      <swiper :height="$store.state.bodyHeiht">
        <swiper-item class="flex flex-middle" v-for="item in imgUrl" :key="item">
          <img :src="item" class="img-responsive-h img-responsive">
        </swiper-item>
      </swiper>
    </div>

    <div class="xdialog flex flex-middle" @click="addressPic = ''" v-if="addressPic">
      <img :src="addressPic" class="img-responsive-h img-responsive">
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Rater, TransferDom, Cell, LoadMore } from 'vux'
import { isWechat, getWechatConfig } from '../libs/fn'
import { get_time_format } from '../libs/until'
export default{
  directives: {
    TransferDom
  },
  name: 'inDispatch',
  components: {
    PubHeader,
    Rater,
    LoadMore,
    Cell
  },
  beforeRouteEnter(to, from, next) {
    const bjtitle = from.path == '/index'? '报价金额': '中标金额'
    next(vm => {
        vm.bjtitle = bjtitle
    })
  },
  computed: {
    onlinetitle() {
      return this.$store.state.userInfo.service_id == 8? '装车时间': '取货时间'
    },
    url() {
      const { service_id } = this.$store.state.userInfo
      if(service_id == 6) {
        return $config.host + '/api/Inquirycitycar/quotesOrderInfo'
      } else if(service_id == 7) {
        return $config.host + '/api/Inquiryzerobear/getOrderInfo'
      } else if(service_id == 8) {
        return $config.host + '/api/Inquirycityvehicle/getOrderInfos'
      }
    },
    verify() {
      const verify = this.$route.query.verify
      if(verify === undefined){
        this.marginBottom = '0.85rem'
        return null
      } else if (verify == 1) {
        this.title = '待报价详情'
        this.marginBottom = '2rem'
      } else if (verify == 0){
        this.title = '待报价详情'
      }
      return verify

    },
    btnName() {
      const verify = this.$route.query.verify || 0
      return verify == 0? '立即报价': '重新报价'
    }
  },
  created() {
    const {oid} = this.$route.query
    const {uid} =  this.$store.state.userInfo
    if(!oid) {
      this.$router.push('/')
      return
    }
    this.$http.post(this.url, qs.stringify({
      uid,
      other_uid: uid,
      oid,
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token
    })).then((res) => {
      const {code, data, msg} = res.data
      if(code == '1') {
        this.loading = true
        this.dataObj = data
        this.userinfo = data.p_user_info
        this.driverinfo = data.driver_user_info || {}
        if(data.goods_img1){
          this.imgUrl.push(data.goods_img1)
        }
        if(data.goods_img2){
          this.imgUrl.push(data.goods_img2)
        }

        this.dataObj.pick_up_time = get_time_format(this.dataObj.pick_up_time)
        this.dataObj.order_time = get_time_format(this.dataObj.order_time)
        this.dataObj.end_time = get_time_format(this.dataObj.end_time)
        const { service_id } = this.$store.state.userInfo
        // 整车又加了个s - -
        if(service_id == 8) {
          this.dataObj.get_addr = this.dataObj.get_addrs
        }
        if(this.verify !== null) {
          let { p_phone } = this.dataObj

          this.dataObj.p_phone = p_phone.substring(0, 3) + ' **** ' + p_phone.substring(7);
          if(this.dataObj.get_addr.length) {
            this.dataObj.get_addr.map(item => {
              if(item.get_phone){
                item.get_phone = item.get_phone.substring(0, 3) + ' **** ' + item.get_phone.substring(7);
              }
            })
          }
        }
      } else if (code == '3') {
        this.$vux.toast.text($config.loginErrMsg, 'middle')
        this.$router.push({path: '/logout'})
      }else {
        this.$vux.toast.text(msg, 'middle')
      }
    }).catch((err) => {
      this.$vux.toast.text($config.errMsg, 'middle')
    })
  },
  data() {
    return {
      userinfo: {},
      driverinfo: {},
      addressPic: '',
      bjtitle: '',
      title: '运单详情',
      marginBottom: '0.05rem',
      uid: this.$store.state.userInfo.uid,
      data3: 4,
      show: false,
      iod: this.$route.query.oid,
      btnLoading: false,
      loading: false,
      dataObj: [],
      imgUrl: [],
      show: false,
      howlong: 3,
      now: parseInt(Date.parse(new Date()) / 1000)
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    handleOffer() {
      const {oid, verify} = this.$route.query
      this.$router.push({path: '/offer', query: { oid, verify }})
    }
  }

}
</script>
<style lang="less" scoped>
  @import '../styles/order.css';
  .icon-quan1.green{
    color: #2fa42c;
  }
  .addresslist p{
    line-height: 0.6rem;
  }
  .footer-action{
    line-height: 0.9rem;
    background: #fff;
    position: fixed;
    bottom:0rem;
    right:0rem;
    padding: 0rem;
    left: 0rem;
    box-shadow: 0px -1px 0.1rem rgba(0,0,0,.1);
  }
  .xdialog{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 99;
  }

</style>
